<!--
 * @Author: White
 * @description: 表格页面
 * @LastEditTime: 2021-06-30 15:54:23
-->

<template>
  <div class="table">
    <!-- 搜索组件 -->
    <common-search 
      size='mini'
      labelWidth = '80px' 
      :searchData = "searchData"
      :searchForm = "searchForm"
      :searchHandle="searchHandle">
    </common-search>
    <!-- 弹窗 -->
    <common-dialog :publiconfig="publiconfig">
      <template slot="public-dialog-content">
        <!-- 表单组件 -->
        <common-form :formLabel="formLabel" :form="formData" :rules="formRules" :ref="formData" @submit="submit" @cancel="cancel"></common-form>
      </template>
    </common-dialog>
    <!-- 表格 -->
    <common-table :tableData="tableData" :colConfigs="colConfigs">
      <!-- row编辑-->
      <el-table-column slot="options" label="编辑" width="100px" align="center">
        <el-button size="mini" slot-scope="{ row }" @click="handleEdit(row)" type="primary">编辑</el-button>
      </el-table-column>
      <el-table-column slot="options" label="删除" width="100px" align="center">
        <el-button size="mini" slot-scope="{ row }" @click="handleDel(row)" type="danger">删除</el-button>
      </el-table-column>
    </common-table>
    <!-- 分页器 -->
    <common-pager :page="page" @getData="getData"></common-pager>
  </div>
</template>

<script>
import CommonSearch from "@/components/eletable/CommonSearch";
import CommonTable from "@/components/eletable/CommonTable";
import CommonForm from "@/components/eletable/CommonForm";
import CommonDialog from "@/components/eletable/CommonDialog";
import CommonPager from "@/components/eletable/CommonPager.vue";
// 组件操作row
import ComPonent from "./ComPonent.vue";
export default {
  name: "App", 
  components: {
    CommonTable,
    CommonForm,
    CommonDialog,
    CommonPager,
    CommonSearch
  },
  data() {
    let sexs = [{label:'男',value:'M'},{label:'女',value:'F'}]
    let sexProps = {label:'label',value:'value'}
    return {
      // 搜索配置
      searchData:{
        name:null,
        age:null,
        sex:null
      },
      searchForm:[
        {type:'Input',label:'姓名',prop:'name',width:'180px',placeholder:'请输入姓名...'},
        {type:'Input',label:'年龄',prop:'age',width:'180px',placeholder:'请输入年龄...'},
        {type:'Select',label:'性别',prop:'sex',width:'180px',options:sexs,props:sexProps,change:row => console.log(row),placeholder:'请选择性别...'}
      ],
      // 搜索操作
      searchHandle:[
        {label:'查询',type:'primary',handle:()=> this.searchhandle()},
        {label:'重置',type:'primary',handle:()=> this.searchData = {}},
        {label:'新增',type:'primary',handle:()=> this.addhandle()}
      ],
      
      // dialog配置
      publiconfig: {
        show: false,
        title: "编辑表单",
        width: "50%",
        height: "auto"
      },
      // 配置列名称
      colConfigs: [
        { prop: "id", label: "ID", width: '100px' },
        { prop: "date", label: "日期" },
        { prop: "name", label: "姓名" },
        { prop: "sex", label: "性别" },
        { prop: "address", label: "地址" },
        { prop: "trend", label: "可操作组件", component: ComPonent },
        { slot: "options" },
      ],
      // 模拟数据
      tableData: [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎",
          sex: "男",
          address: "上海市普陀区金沙江路 1518 弄",
          trend: "10"
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王大虎",
          sex: "女",
          address: "上海市普陀区金沙江路 1517 弄",
          trend: "1"
        },
      ],
      // 表单配置
      formLabel: [
        { model: 'id',
          label: 'ID',
          type: 'input'
        },
        {
          model: 'date',
          label: '日期',
          type: 'date'
        },
        {
          model: 'name',
          label: '姓名',
          type: 'input'
        },
        {
          model: 'address',
          label: '地址',
          type: 'input'
        },
        {
          model: 'trend',
          label: '可操作',
          type: 'input'
        },
        {
            model: 'sex',
            label: '性别',
            type: 'select',
            opts: [
                {
                    label: '男',
                    value: 1
                },
                {
                    label: '女',
                    value: 0
                }
            ]
        }
      ],

      // 表单规则
      formRules: {
        id: [
          { required: true, message: '请输入ID', trigger: 'blur' },
        ],
        date: [
          { required: true, message: '请输入日期', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },
        ],
        trend: [
          { required: true, message: '请输入可操作', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'blur' },
        ],
      },

      formData: {
          id: '',
          data: '',
          name: '',
          address: '',
          sex: ''      },
      // 分页配置
      page: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 200
      },
    };
  },
  methods: {
    // 新增
    addhandle() {
      console.log(this)
      this.publiconfig.show = true
      this.publiconfig.title = '新增表单'
      this.formData = {}
    },
    // 搜索
    searchhandle() {
      console.log('搜索',this.searchData)
    },
    // 编辑
    handleEdit(row){
      this.formData = row
      this.publiconfig.show = true
      this.publiconfig.title = '编辑表单'
      console.log(this.formData)
    },
    // 删除
    handleDel(row){
      console.log(row)
    },
    // 提交
    submit(val) {
      console.log(val)
    },
    // 取消
    cancel(val) {
      this.publiconfig.show = val
    },
    // 请求数据
    getData(val) {
      console.log(val)
    },
    // 下拉事件
    getContent(data){
      console.log(data)
    },
    // 关闭父组件弹窗
    closeDialog() {
    }
  }
};
</script>
